大家好，我是烏木白，今天要和大家介紹圖片經常會出錯的地方～

img 和 background-img 傻傻分不清楚？

我自己當初在學習的切版的時候，一度把 img 及 background-img 搞混，後來才知道 img 其實就是在你的圖片，有機會長期的更換所以使用 img；另一方面因為 background-img 是主題的照片，可能不常更換，所以使用這個屬性。

網頁常見的錯誤：圖片比例變形

常見的錯誤就是把 img 設定了固定高度，又把寬度設定 width:100%

原圖：

示範圖片：

無限延伸

使用 background-img 的方式

這是一個比較簡單的作法，將 img 中的圖片使用 background-image 來呈現，並使用 background-size: cover; 方式來限制顯示區域，同時也可搭配 background-position 來調整圖片的顯示位置。

可搭配 background-position 來調整背景圖的位置。

示範：

  background-cover {
  background-position: center center;
  background-size: cover;
}

background-size: cover;可以讓背景圖覆蓋整個區域，此做法也會裁切掉部分圖片；如果圖片主題被裁切可試著改變 background-position 屬性。因為有一定的機率可能會裁掉圖片，如果發生的話，是否要選擇更換圖片！